<script setup lang="ts">
import { ref } from 'vue';
import { buildRequestURL } from '@/api/controller';
import { useThermalPrinter } from '@/hooks/useThermalPrinter';
import { buildAssetSource } from '@/utils';

const emit = defineEmits(['close']);

const show = ref(false);

function handleClose() {
  show.value = false;
  emit('close');
}

enum PRINT_STATUS {
  PRINTING,
  SUCCESS,
  FAIL
}

// 打印状态
const printStatus = ref<PRINT_STATUS>(PRINT_STATUS.PRINTING);

const printText = ref('凭条正在打印中...');

const { print } = useThermalPrinter();

defineExpose({
  onOpen(orderNo: string) {
    printText.value = '凭条打印中...';
    printStatus.value = PRINT_STATUS.PRINTING;
    show.value = true;

    const url = buildRequestURL(`/report/jasper/registration-voucher/generate?orderNo=${orderNo}`);

    print(url).then(() => {
      printStatus.value = PRINT_STATUS.SUCCESS;
      printText.value = '凭条打印成功!请取走您的挂号凭条';
    });
  },
  onClose() {
    handleClose();
  }
});
</script>

<template>
  <view v-show="show" class="popup-overlay">
    <view class="app-popup">
      <view class="app-popup__hd">
        <view class="app-popup__title">
          打印凭条
        </view>
        <view class="app-popup__desc">
          正在打印挂号凭条
        </view>
        <view class="app-popup__close" @click="handleClose">
          <image :src="buildAssetSource('login-close.png')" class="h-54 w-54" />
        </view>
      </view>
      <view class="app-popup__content">
        <view class="flex-center flex-col">
          <image :src="buildAssetSource('print.png')" class="h-582 w-728" />
          <view class="printing-text" :nodes="printText">
            {{ printText }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.popup-overlay {
  @apply flex-center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.app-popup {
  width: 886px;
  background: #fff;
  padding-bottom: 50px;
  border-radius: 20px;

  .app-popup__hd {
    position: relative;
    padding-left: 46px;
    padding-top: 56px;

    .app-popup__title {
      font-size: 54px;
      font-weight: bold;

      color: #333333;
    }
    .app-popup__desc {
      font-size: 24.25px;
      color: var(--secondary-text-color);
      margin-top: 20px;
    }
    .app-popup__close {
      position: absolute;
      top: 45px;
      right: 64px;
    }
  }

  .app-popup__content {
    padding: 0 20px;
    margin-top: 50px;

    .printing-text {
      font-size: 34px;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
